window.onload = function () {
  // 当点击某一个li的时候，该li添加下边线  bottomColor
  var lis = document.querySelectorAll(".aside .nav .nav li");
  var Aa = document.querySelectorAll(".aside .nav .nav li a");
  var oUl = document.querySelectorAll(".aside .nav .nav li ul");
  for (var i = 0; i < lis.length; i++) {
    lis[i].index = i;
    lis[i].addEventListener("click", function () {
      for (var j = 0; j < lis.length; j++) {
        lis[j].className = "";
      }
      this.className = "bottomColor";
    });
  }
  // 让a字体改变颜色
  for (var i = 0; i < Aa.length; i++) {
    Aa[i].addEventListener("click", function () {
      for (var i = 0; i < Aa.length; i++) {
        Aa[i].classList.remove("blue");
      }
      this.classList.add("blue");
    });
  }
  // 显示与隐藏
  for (var i = 0; i < Aa.length; i++) {
    Aa[i].onclick = function () {
      var uls = this.nextElementSibling;
      if (getComputedStyle(uls).height == "0px") {
        for (var j = 0; j < oUl.length; j++) {
          oUl[j].style.height = "0px";
        }
        uls.style.height =
          uls.children[0].offsetHeight * uls.children.length + "px";
      } else {
        uls.style.height = "0px";
      }
    };
  }
};




var data = [
  { number: 1, name: "吴磊", tel: 15378280309, organization: '流调疾控中心', role: '疾控登记员', idName: '10001', password: 'abc123', operator: '邓鸿伟', operation: '', state: '启用'},
  { number: 2, name: "陈炳林", tel: 15373822309, organization: '桂溪街道/天府鹭洲', role: '隔离点工作人员', idName: '10002', password: 'abc123', operator: '邓鸿伟', operation: '', state: '禁用'},
  { number: 3, name: "王鹤棣", tel: 14782280309, organization: '流调疾控中心', role: '疾控排查员', idName: '10003', password: 'abc123', operator: '邓鸿伟', operation: '', state: '启用'},
  { number: 4, name: "黄乐荣", tel: 14378280309, organization: '桂溪街道/天府鹭洲', role: '隔离点工作人员', idName: '10004', password: 'abc123', operator: '邓鸿伟', operation: '', state: '启用'},
  { number: 5, name: "虞书欣", tel: 15378280669, organization: '流调疾控中心', role: '居家监测员', idName: '10005', password: 'abc123', operator: '邓鸿伟', operation: '', state: '启用'},
  { number: 6, name: "邓紫棋", tel: 15378285609, organization: '流调疾控中心', role: '领导', idName: '10006', password: 'abc123', operator: '邓鸿伟', operation: '', state: '禁用'},
  { number: 7, name: "成毅", tel: 15373480309, organization: '桂溪街道/天府鹭洲', role: '疾控登记员', idName: '10007', password: 'abc123', operator: '邓鸿伟', operation: '', state: '启用'},
  { number: 8, name: "陈伟霆", tel: 15378090309, organization: '流调疾控中心', role: '居家监测员', idName: '10008', password: 'abc123', operator: '邓鸿伟', operation: '', state: '启用'},
  { number: 9, name: "陈学冬", tel: 15378280209, organization: '流调疾控中心', role: '居家监测员', idName: '10009', password: 'abc123', operator: '邓鸿伟', operation: '', state: '禁用'},
  { number: 10, name: "刘诗诗", tel: 15375680309, organization: '桂溪街道/天府鹭洲', role: '疾控登记员', idName: '10010', password: 'abc123', operator: '邓鸿伟', operation: '', state: '启用'},
  { number: 11, name: "景甜", tel: 15371980309, organization: '流调疾控中心', role: '居家监测员', idName: '10011', password: 'abc123', operator: '邓鸿伟', operation: '', state: '禁用'},
];

var page = 1;//当前的页码
var count = 10;//每页的条数
var oTBody = document.querySelector('tbody');//获取tbody
var oPagination = document.querySelector('.pagination')//获取分页容器
var oPrevBtn = document.querySelector('.prev')//获取上一页的按钮
var oNextBtn = document.querySelector('.next')//获取下一页的按钮

// 获取搜索的输入框和按钮
var oSearchInp = document.querySelector('.searchInp');
var oSearchBtn = document.querySelector('.searchBtn');
var oNullBtn = document.querySelector('.nullBtn');
oNullBtn.addEventListener('click', nullFn);
function nullFn(){
  oSearchInp = '';
}


var addBtn = document.querySelector('.addBtn');
//获取添加的保存按钮
var oAddSaveBtn = document.querySelector('.addSaveBtn');
//获取修改的保存
var oEditSaveBtn=document.querySelector('.editSaveBtn');
//获取重置按钮
var oResetBtn=document.querySelector('.resetBtn');

// 页面初始化的渲染功能
function render() {
  //查看搜索框的内容
  var str = oSearchInp.value;//搜索的内容
  var searchData = [];//搜索后的数据
  if (str.trim() == '') {//没有搜索内容，全部都要
      searchData = data; //搜索的就是全部
  } else {
    //有搜索的内容
    for (var i = 0; i < data.length; i++) {
      //如果每条数据中的名字里面包含搜索的内容
      if (data[i].name.includes(str)) {
        //就把符合条件的内容放进渲染的数据中
        searchData.push(data[i]);
      }
    }
  }

  
  // 让table为空
  oTBody.innerHTML = '';
  var renderArr = searchData.slice((page - 1) * count, page * count);//根据count和page准备要渲染的数据
  for (var i = 0; i < renderArr.length; i++) {//循环要渲染的数据
    var oTr = document.createElement('tr');//创建tr
    oTr.innerHTML = `
      <td>${renderArr[i].number}</td>
      <td>${renderArr[i].name}</td>
      <td>${renderArr[i].tel}</td>
      <td>${renderArr[i].organization}</td>
      <td>${renderArr[i].role}</td>
      <td>${renderArr[i].idName}</td>
      <td>${renderArr[i].password}</td>
      <td>${renderArr[i].operator}</td>
      <td>
        <button class="btn btn-primary edit">编辑<button>
        <button class="btn btn-danger del">删除<button>
        <button class="btn resetBtn btn-warning">重置密码<button>
      </td>
      <td>${renderArr[i].state}</td>
    `; //给tr创建内容
    oTBody.appendChild(oTr);//把tr创建到tbody里面
  }

  // 渲染页码
  var aPageBtn = document.querySelectorAll('.pageBtn');
  // 删除所有的页码
  for (var i = 0; i < aPageBtn.length; i++) {
      oPagination.removeChild(aPageBtn[i].parentNode);
  }
  // 根据数据的长度重新创建页码
  for (var i = 1; i <= Math.ceil(searchData.length / count); i++) {
    var oLi = document.createElement('li');
    oLi.innerHTML = `<a class="pageBtn" href="#">${i}</a>`;
    if (i == page) {
        oLi.classList.add('active');
    }
    oPagination.insertBefore(oLi, oPagination.lastElementChild);
  } 
}


// 一上来就渲染一次数据
render();



// 给分页加事件
oPagination.addEventListener('click', changePage);
function changePage() {
  if (event.target.className == 'pageBtn') {
      page = event.target.innerHTML;
      render();
  }
}
// 给上一页和下一页加事件
oPrevBtn.addEventListener('click', prev);
oNextBtn.addEventListener('click', next);
function prev() {
  if (page > 1) {
      page--;
      render();
  }
}
function next() {
  if (page < Math.ceil(data.length / count)) {
      page++;
      render();
  }
}

//搜索
oSearchBtn.addEventListener('click', searchFn);
function searchFn() {
  console.log()
    page = 1;
    render()
}


// 编辑
oTBody.addEventListener('click', openEdit);
function openEdit() {
    //判断事件源
    if (event.target.className.includes('edit')) {
        //让编辑框显示
        $('#editModal').modal('show');
        //确认是那个id的数据
        var id = event.target.parentNode.parentNode.children[0].innerText;
        //循环数据，找到对应id的，给编辑框赋值
        for (var i = 0; i < data.length; i++) {
            if (data[i].number == id) {
                document.querySelector('.editNumber').value =data[i].number;
                document.querySelector('.editName').value = data[i].name;
                document.querySelector('.editTel').value = data[i].tel;
                document.querySelector('.editOrganization').value = data[i].organization;
                document.querySelector('.editRole').value = data[i].role;
                document.querySelector('.editIdName').value = data[i].idName;
                document.querySelector('.editPassword').value = data[i].password; 
            }
        }
    }
}

//点击修改保存
oEditSaveBtn.addEventListener('click',editSave);
function editSave(){
    //看替换的是哪一条
    var id = document.querySelector('.editNumber').value;
    //循环数据，找到对应的，更改
    for(var i=0;i<data.length;i++){
        if(data[i].number==id){
            data[i].name=document.querySelector('.editName').value;
            data[i].tel=document.querySelector('.editTel').value;
            data[i].organization=document.querySelector('.editOrganization').value;
            data[i].role=document.querySelector('.editRole').value;
            data[i].idName=document.querySelector('.editIdName').value;
            data[i].password=document.querySelector('.editPassword').value; 
        }
    }
    //关闭弹框
    $('#editModal').modal('hide');
    //重新渲染
    render();
}



// 删除功能
oTBody.addEventListener('click', del);
function del() {
    if (event.target.className.includes('del')) {
        //找到id
        var id = event.target.parentNode.parentNode.children[0].innerText;
        //循环数据对比
        for (var i = 0; i < data.length; i++) {
            if (data[i].number == id) {
                //删除id所对应的数据
                data.splice(i, 1);
            }
        }
        //重新渲染
        render();
    }
}


// 重置密码
var resetId;//重置的id
oTBody.addEventListener('click',openReset);
function openReset(){
    if(event.target.className.includes('resetBtn')){
        $('#resetModal').modal('show');
        resetId = event.target.parentNode.parentNode.children[0].innerText;
    }
}
//点击重置
oResetBtn.addEventListener('click',resetPass);
function resetPass(){
    for(var i=0;i<data.length;i++){
        if(data[i].number == resetId){
            data[i].password = '000000';
        }
    }
    $('#resetModal').modal('hide');
    // data[i].password = '000000';

}



// 新增
oAddSaveBtn.addEventListener('click', addFn);
function addFn() {
  var addNumber = document.querySelector('.addNumber').value;
  var addName = document.querySelector('.addName').value;
  var addTel = document.querySelector('.addTel').value;
  var addOrganization = document.querySelector('.addOrganization').value;
  var addRole = document.querySelector('.addRole').value;
  var addIdName = document.querySelector('.addIdName').value;
  var addPassword = document.querySelector('.addPassword').value;
  var addOperator = document.querySelector('.addOperator').value;
  // var addOperation = document.querySelector('.addOperation').value;
  var addState = document.querySelector('.addState').value;

  data.push({
      number: addNumber,
      name: addName,
      tel: addTel,
      organization: addOrganization,
      role: addRole,
      idName: addIdName,
      password: addPassword,
      operator: addOperator,
      // operation: addOperation,
      state: addState,
  })
  //让模态框隐藏
  $('#addModal').modal('hide');
  render();
    
}





